'use client'
import React from 'react';
import Map from './components/Map/page';

const HomePage = () => {
    // 定义路线数据
    const routes = [
        [
            { name: '观音堂', city: '长治' },
            { name: '潞安府城隍庙', city: '长治' }
        ],
        [
            { name: "漳泽湖湿地公园", city: "长治" },
            { name: "上党门", city: "长治" }
        ],
        [
            { name: "龙门寺", city: "长治" },
            { name: "大云院", city: "长治" },
            { name: "天台庵", city: "长治" }
        ]
    ];

    return (
        <div className="min-h-screen bg-gray-100 py-8 px-4">
            <div className="max-w-6xl mx-auto">
                <h1 className="text-3xl font-bold text-gray-800 mb-6 text-center">
                    长治市景点行车路线图
                </h1>
                
                {/* 地图容器 */}
                <div className="bg-white rounded-lg shadow-lg p-4 mb-6">
                    <div className="w-full h-[600px]">
                        <Map 
                            list={routes} 
                            width="100%" 
                            height="100%" 
                            zoom={13}
                        />
                    </div>
                </div>

                {/* 路线说明 */}
                <div className="bg-white rounded-lg shadow-lg p-6">
                    <h2 className="text-xl font-semibold text-gray-800 mb-4">路线说明</h2>
                    <div className="space-y-3">
                        <div className="flex items-center">
                            <div className="w-4 h-4 rounded-full bg-[#3366CC] mr-3"></div>
                            <p>路线1：观音堂 → 潞安府城隍庙</p>
                        </div>
                        <div className="flex items-center">
                            <div className="w-4 h-4 rounded-full bg-[#DC3912] mr-3"></div>
                            <p>路线2：漳泽湖湿地公园 → 上党门</p>
                        </div>
                        <div className="flex items-center">
                            <div className="w-4 h-4 rounded-full bg-[#FF9900] mr-3"></div>
                            <p>路线3：龙门寺 → 大云院 → 天台庵</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default HomePage;
